<template>
  <div ref="mapContainer" style="width: 100vw; height: 100vh"></div>
</template>

<script setup>
import { ref } from "vue";
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

const mapContainer = ref(null);

let map = null;

onMounted(() => {
  initMap()
});

onUnmounted(() => {
  map?.destroy();
});



function initMap() {
  window._AMapSecurityConfig = {
    securityJsCode: "5c6823124754e449d95a1885e5ee4696",
  };
  AMapLoader.reset()
  AMapLoader.load({
    key: "b5d0d0f11e3322f4dc91eed7bb9e3e89", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map(mapContainer.value, {
        // showLabel: false, //不显示地图文字标记
        features: ['building'],
        // 设置地图容器id
        viewMode: '3D', //地图模式
        pitch: 65, //地图俯仰角度，有效范围 0 度- 83 度
        rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
        pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
        zoom: 17, //初始化地图层级
        rotation: 43, //初始地图顺时针旋转的角度
        zooms: [17, 20], //地图显示的缩放级别范围
        center: [119.940733, 32.475955], //初始地图中心经纬度
        // mapStyle: 'amap://styles/grey',
        
      });
    })
    .catch((e) => {
      console.log(e);
    });
}

</script>

<style scoped>
/* #container {
  width: 100%;
  height: 800px;
} */
</style>
